<!-- FishDetail.vue - 鱼类详情页 -->
<template>
  <div class="fish-detail-page">
    <!-- 返回按钮 -->
    <div class="back-btn">
      <el-button @click="$router.back()" icon="ArrowLeft">
        返回
      </el-button>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>

    <!-- 鱼类详情 -->
    <div v-else-if="fish" class="fish-detail">
      <!-- 鱼类头部卡片 -->
      <el-card class="header-card" shadow="hover">
        <div class="header-content">
          <div class="fish-image">
            <el-image :src="fish.fish_img_url || fish.imageUrl" fit="cover">
              <template #error>
                <div class="image-error">
                  <el-icon><PictureFilled /></el-icon>
                  <p>图片加载失败</p>
                </div>
              </template>
            </el-image>
          </div>

          <div class="fish-header-info">
            <div class="fish-name-section">
              <h1 class="fish-name">{{ fish.fishName }}</h1>
              <el-tag v-if="fish.habitat" size="large" type="primary">{{ fish.habitat }}</el-tag>
            </div>

            <div class="fish-meta">
              <div class="meta-item" v-if="fish.scientificName">
                <el-icon><Document /></el-icon>
                <span>学名：{{ fish.scientificName }}</span>
              </div>
              <div class="meta-item" v-if="fish.distribution">
                <el-icon><Location /></el-icon>
                <span>分布区域：{{ fish.distribution }}</span>
              </div>
              <div class="meta-item" v-if="fish.habitat_diet">
                <el-icon><InfoFilled /></el-icon>
                <span>生活习性：{{ fish.habitat_diet }}</span>
              </div>
              <div class="meta-item" v-if="fish.economic_significance">
                <el-icon><Money /></el-icon>
                <span>经济价值：{{ fish.economic_significance }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 详细信息 -->
      <el-row :gutter="20">

        <!-- 鱼类描述 -->
        <el-col :xs="24" v-if="fish.description">
          <el-card class="info-card desc-card" shadow="hover">
            <template #header>
              <div class="card-title">
                <el-icon><Document /></el-icon>
                鱼类简介
              </div>
            </template>
            <div class="info-content">
              <p class="desc-text">{{ fish.description }}</p>
            </div>
          </el-card>
        </el-col>

        <!-- 经济价值 -->
        <el-col :xs="24" :md="12" v-if="fish.economic_significance">
          <el-card class="info-card economic-card" shadow="hover">
            <template #header>
              <div class="card-title">
                <el-icon><Money /></el-icon>
                经济价值
              </div>
            </template>
            <div class="info-content">
              <div class="economic-value-box">
                <div class="value-icon">💰</div>
                <p class="desc-text">{{ fish.economic_significance }}</p>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 垂钓技巧 -->
        <el-col :xs="24" :md="12" v-if="fish.recommended_fishing_methods">
          <el-card class="info-card fishing-card" shadow="hover">
            <template #header>
              <div class="card-title">
                <el-icon><Reading /></el-icon>
                推荐钓法与技巧
              </div>
            </template>
            <div class="info-content">
              <div class="fishing-method-box">
                <div class="method-icon">🎣</div>
                <p class="desc-text">{{ fish.recommended_fishing_methods }}</p>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 垂钓建议 -->
        <el-col :xs="24" :md="12">
          <el-card class="info-card tips-card" shadow="hover">
            <template #header>
              <div class="card-title">
                <el-icon><Bell /></el-icon>
                垂钓小贴士
              </div>
            </template>
            <div class="info-content">
              <div class="tip-list">
                <div class="tip-box">
                  <el-icon class="tip-icon" color="#67c23a"><CircleCheckFilled /></el-icon>
                  <span>选择合适的钓点，观察水域环境</span>
                </div>
                <div class="tip-box">
                  <el-icon class="tip-icon" color="#67c23a"><CircleCheckFilled /></el-icon>
                  <span>根据季节和天气调整钓法</span>
                </div>
                <div class="tip-box">
                  <el-icon class="tip-icon" color="#67c23a"><CircleCheckFilled /></el-icon>
                  <span>保持安静，避免惊扰鱼群</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 注意事项 -->
        <el-col :xs="24" :md="12">
          <el-card class="info-card notice-card" shadow="hover">
            <template #header>
              <div class="card-title">
                <el-icon><Warning /></el-icon>
                注意事项
              </div>
            </template>
            <div class="info-content">
              <div class="notice-list">
                <div class="notice-box">
                  <el-icon class="notice-icon" color="#e6a23c"><WarningFilled /></el-icon>
                  <span>遵守当地渔业法规，禁渔期不得垂钓</span>
                </div>
                <div class="notice-box">
                  <el-icon class="notice-icon" color="#e6a23c"><WarningFilled /></el-icon>
                  <span>注意个人安全，穿戴救生设备</span>
                </div>
                <div class="notice-box">
                  <el-icon class="notice-icon" color="#e6a23c"><WarningFilled /></el-icon>
                  <span>爱护环境，不乱扔垃圾</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 操作按钮 -->
      <div class="action-section">
        <el-button type="primary" size="large" @click="$router.push('/map')">
          <el-icon><MapLocation /></el-icon>
          查看河流分布
        </el-button>
        <el-button size="large" @click="$router.push('/gear/market')">
          <el-icon><ShoppingBag /></el-icon>
          购买渔具
        </el-button>
        <el-button size="large" @click="$router.push('/fish')">
          <el-icon><DataAnalysis /></el-icon>
          返回鱼类大全
        </el-button>
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-else class="error-container">
      <el-empty description="鱼类信息不存在">
        <el-button type="primary" @click="$router.push('/fish')">
          返回鱼类大全
        </el-button>
      </el-empty>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { fishAPI } from '@/api'
import {
  ArrowLeft,
  PictureFilled,
  Location,
  Document,
  InfoFilled,
  Reading,
  MapLocation,
  ShoppingBag,
  DataAnalysis,
  Star,
  Trophy,
  Bell,
  CircleCheckFilled,
  Warning,
  WarningFilled,
  Money
} from '@element-plus/icons-vue'

export default {
  name: 'FishDetail',
  components: {
    ArrowLeft,
    PictureFilled,
    Location,
    Document,
    InfoFilled,
    Reading,
    MapLocation,
    ShoppingBag,
    DataAnalysis,
    Star,
    Trophy,
    Bell,
    CircleCheckFilled,
    Warning,
    WarningFilled,
    Money
  },
  setup() {
    const route = useRoute()
    const router = useRouter()

    // 数据
    const fish = ref(null)
    const loading = ref(false)

    // 获取鱼类详情
    const fetchFishDetail = async () => {
      try {
        loading.value = true
        const fishId = route.params.id

        const response = await fishAPI.getFishDetail(fishId)
        if (response.code === 0) {
          fish.value = response.data
        } else {
          ElMessage.error('获取鱼类详情失败')
        }
      } catch (error) {
        console.error('获取鱼类详情失败:', error)
        ElMessage.error('获取鱼类详情失败')
      } finally {
        loading.value = false
      }
    }

    onMounted(() => {
      fetchFishDetail()
    })

    return {
      fish,
      loading
    }
  }
}
</script>

<style scoped lang="scss">
$primary-color: #409eff;

.fish-detail-page {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.back-btn {
  margin-bottom: 20px;
}

.loading-container {
  background: white;
  border-radius: 12px;
  padding: 40px;
}

.fish-detail {
  .header-card {
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;

    .header-content {
      display: flex;
      gap: 30px;

      .fish-image {
        width: 400px;
        height: 300px;
        border-radius: 12px;
        overflow: hidden;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

        .el-image {
          width: 100%;
          height: 100%;
        }

        .image-error {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;

          .el-icon {
            font-size: 80px;
            margin-bottom: 15px;
          }
        }
      }

      .fish-header-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .fish-name-section {
          display: flex;
          align-items: center;
          gap: 15px;
          margin-bottom: 25px;

          .fish-name {
            font-size: 32px;
            color: #303133;
            margin: 0;
            font-weight: 700;
          }
        }

        .fish-meta {
          .meta-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 15px;
            color: #606266;
            margin-bottom: 15px;
            line-height: 1.6;

            .el-icon {
              color: $primary-color;
              font-size: 18px;
              margin-top: 2px;
              flex-shrink: 0;
            }

            span {
              flex: 1;
              word-break: break-word;
            }
          }
        }
      }
    }
  }

  .info-card {
    margin-bottom: 20px;
    border-radius: 12px;

    .card-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }

    .info-content {
      .desc-text {
        font-size: 15px;
        line-height: 1.8;
        color: #606266;
        margin: 0;
        white-space: pre-wrap;
      }

      .info-item {
        display: flex;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;

        &:last-child {
          border-bottom: none;
        }

        .label {
          font-size: 15px;
          color: #909399;
          width: 120px;
          flex-shrink: 0;
        }

        .value {
          font-size: 15px;
          color: #303133;
          flex: 1;
          font-weight: 500;
        }
      }

      .tags-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 20px;

        .el-tag {
          padding: 8px 16px;
          
          .el-icon {
            margin-right: 5px;
          }
        }
      }

      .feature-tips {
        background: #f0f9ff;
        padding: 12px 16px;
        border-radius: 8px;
        border-left: 4px solid $primary-color;

        p {
          margin: 0;
          font-size: 14px;
          color: #606266;
        }
      }

      .fishing-method-box,
      .economic-value-box {
        display: flex;
        gap: 20px;
        align-items: flex-start;

        .method-icon,
        .value-icon {
          font-size: 48px;
          flex-shrink: 0;
        }
      }

      .tip-list,
      .notice-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .tip-box,
      .notice-box {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        background: #f9f9f9;
        border-radius: 8px;

        .tip-icon,
        .notice-icon {
          font-size: 20px;
          flex-shrink: 0;
        }

        span {
          font-size: 14px;
          color: #606266;
          line-height: 1.6;
        }
      }
    }

    &.desc-card {
      background: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%);
    }

    &.fishing-card {
      background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
    }

    &.economic-card {
      background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
    }

    &.tips-card {
      .info-content {
        background: #f0f9ff;
        padding: 16px;
        border-radius: 8px;
      }

      .tip-box {
        background: white;
      }
    }

    &.notice-card {
      .info-content {
        background: #fff8f0;
        padding: 16px;
        border-radius: 8px;
      }

      .notice-box {
        background: white;
      }
    }
  }

  .action-section {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
}

.error-container {
  background: white;
  border-radius: 12px;
  padding: 80px 20px;
  text-align: center;
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column !important;

    .fish-image {
      width: 100% !important;
      height: 250px !important;
    }
  }

  .action-section {
    flex-direction: column;

    .el-button {
      width: 100%;
    }
  }
}
</style>
